<template>
  <div class="edit-shuziren">
    <div class="select-shuziren">
      <label>选择数字人</label>
      <el-select v-model="selectedShuziren">
        <el-option
          v-for="item in shuzirenOptions"
          :key="item.id"
          :label="item.name"
          :value="item.id"
        >
        </el-option>
      </el-select>
    </div>
    <div class="save-btn">
      <el-button type="primary" color="#155EEF" @click="save()">保存</el-button>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    shuzirenList: {
      type: Array,
      default: () => [],
    },
    shuzirenId: {
      type: Number,
    },
  },
  data() {
    return {
      selectedShuziren: "",
      shuzirenOptions: [],
    };
  },
  watch: {
    shuzirenList: {
      handler(newVal) {
        this.shuzirenOptions = newVal;
      },
      immediate: true,
    },
    shuzirenId: {
      handler(newVal) {
        this.selectedShuziren = newVal;
      },
      immediate: true,
    },
  },
  methods: {
    save() {
      this.$emit("saveShuziren", this.selectedShuziren);
    },
  },
};
</script>

<style lang="scss" scoped>
.edit-shuziren {
  padding: 50px 70px 0 50px;
  width: 100%;
  height: 100%;
  background-color: #fff;
  border-radius: 10px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 33px;
  box-sizing: border-box;
  .select-shuziren {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 10px;
    background-color: #fff;
    label {
      width: 120px;
      font-size: 16px;
      color: #1e2c48;
    }
  }
}
</style>